{{csrf_field()}}
<div class="layui-row layui-col-space20">
    <div class="layui-col-md4">

        <div class="cloumbox">
            <div class="menu-title"><span>组件库</span></div>
            <div class="navbox">
                <div class="navgroup">
                    <div class="navtitle">
                        媒体组件
                    </div>
                    <div class="navs-components">
                        <nav class="special" data-type="banner">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-image-multiple"></i></p>
                            <p>图片轮播</p>
                        </nav>
                        <nav class="special" data-type="imageSingle">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-image"></i></p>
                            <p>单图组</p>
                        </nav>
                        <nav class="special" data-type="window">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-newspaper"></i></p>
                            <p>图片橱窗</p>
                        </nav>
                        <nav class="special" data-type="video">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-video"></i></p>
                            <p>视频组</p>
                        </nav>
                        <div class="clear"></div>

                    </div>
                    <div class="navtitle">
                        商城组件
                    </div>
                    <div class="navs-components">
                        <nav class="special" data-type="search">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-search-web"></i></p>
                            <p>搜索框</p>
                        </nav>
                        <nav class="special" data-type="notice">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-volume-high"></i></p>
                            <p>公告组</p>
                        </nav>
                        <nav class="special" data-type="navBar">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-apps"></i></p>
                            <p>导航组</p>
                        </nav>
                        <nav class="special" data-type="goods">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-shopping"></i></p>
                            <p>商品组</p>
                        </nav>
                        <nav class="special" data-type="coupon">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-ticket-percent"></i></p>
                            <p>优惠券组</p>
                        </nav>
                        <div class="clear"></div>

                    </div>
                    <div class="navtitle">
                        工具组件
                    </div>
                    <div class="navs-components">
                        <nav class="special" data-type="blank">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-selection"></i></p>
                            <p>辅助空白</p>
                        </nav>
                        <nav class="special" data-type="guide">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-minus"></i></p>
                            <p>辅助线</p>
                        </nav>
                        <nav class="special" data-type="richText">
                            <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-clipboard-text"></i></p>
                            <p>富文本</p>
                        </nav>
                        <div class="clear"></div>

                    </div>



                </div>

                <div class="action">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">保存页面</button>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-col-md4">

        <div class="cloumbox phonebox">
            <div class="diy-phone">
                <div id="diy-page" class="phone-top optional" style="background: url({{ asset('static/admin/images/phone-top-black.png') }}) center center / contain no-repeat rgb(255, 255, 255);">
                    <h4 style="color: black;">页面标题</h4>
                </div>
                <div id="phone-main" class="phone-main layer-scrollable-vertical">
                    <div class="drag optional" id="diy-id" data-itemid="id">
                        <div class="diy-search">
                            <input type="text" name="title"  autocomplete="off" placeholder="请输入标题" class="layui-input">
                        </div>
                        <div class="btn-edit-del">
                            <div class="btn-del">删除</div>
                        </div>
                    </div>

                    <div class="drag optional" id="diy-id2" data-itemid="2id">
                        <div class="diy-carousel">
                            <img src=" http://min3.test/assets/user/img/diy/banner_01.jpg">
                            <img src=" http://min3.test/assets/user/img/diy/banner_01.jpg">
                            <div class="dots">
                                <span style="background: #ff1493"></span>
                                <span style="background: #ff1493"></span>
                            </div>

                        </div>
                        <div class="btn-edit-del">
                            <div class="btn-del">删除</div>
                        </div>
                    </div>

                    <div class="drag optional" >
                        <div class="diy-single-img">
                            <img src=" http://min3.test/assets/user/img/diy/banner_01.jpg">
                            <img src=" http://min3.test/assets/user/img/diy/banner_01.jpg">
                        </div>
                        <div class="btn-edit-del">
                            <div class="btn-del">删除</div>
                        </div>
                    </div>

                    <div class="drag optional" >
                        <div class="diy-navbar" style="">
                            <ul class="layer-avg-sm-4">
                                <li class="">
                                    <div class="item-image">
                                        <img src="http://min3.test/assets/user/img/diy/navbar/icon-1.png">
                                    </div>
                                    <p class="item-text layer-text-truncate" style="">sssss</p>
                                </li>
                                <li class="">
                                    <div class="item-image">
                                        <img src="http://min3.test/assets/user/img/diy/navbar/icon-1.png">
                                    </div>
                                    <p class="item-text layer-text-truncate" style="">sssss</p>
                                </li>
                                <li class="">
                                    <div class="item-image">
                                        <img src="http://min3.test/assets/user/img/diy/navbar/icon-1.png">
                                    </div>
                                    <p class="item-text layer-text-truncate" style="">sssss</p>
                                </li>

                                <li class="">
                                    <div class="item-image">
                                        <img src="http://min3.test/assets/user/img/diy/navbar/icon-1.png">
                                    </div>
                                    <p class="item-text layer-text-truncate" style="">sssss</p>
                                </li>
                                <div class="clear"></div>

                            </ul>
                        </div>
                        <div class="btn-edit-del">
                            <div class="btn-del">删除</div>
                        </div>
                    </div>

                    <div class="drag optional" >
                        <div class="diy-window" style="">

                        </div>
                        <div class="btn-edit-del">
                            <div class="btn-del">删除</div>
                        </div>
                    </div>

                    <div class="drag optional" >
                        <div class="diy-blank" style=" height: 20px; background: #fff">

                        </div>
                        <div class="btn-edit-del">
                            <div class="btn-del">删除</div>
                        </div>
                    </div>

                    <div class="drag optional" >
                        <div class="diy-line" >
                            <p class="line" style="border-top: 1px solid #ccc"></p>
                        </div>
                        <div class="btn-edit-del">
                            <div class="btn-del">删除</div>
                        </div>
                    </div>

                    <div class="drag optional" >
                        <div class="diy-richtext" >
                            <p>dddddd</p>
                        </div>
                        <div class="btn-edit-del">
                            <div class="btn-del">删除</div>
                        </div>
                    </div>

                    <div class="drag optional" >
                        <div class="diy-notice" >
                            <p>dddddd</p>
                        </div>
                        <div class="btn-edit-del">
                            <div class="btn-del">删除</div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4 ">


        <div class="cloumbox">
            <div class="menu-title"><span>图片轮播</span></div>
        </div>

    </div>
</div>
<textarea id="edit_image" style="display: none;"></textarea>
@section('script')
    <link rel="stylesheet" href="{{ asset('static/admin/iconfonts/mdi/css/materialdesignicons.min.css') }}">
    <link rel="stylesheet" href="{{ asset('static/admin/css/diynew.css') }}">

    <script src="{{ asset('static/admin/js/jquery.min.js') }}"></script>
    <script src="{{ asset('static/admin/js/ddsort/ddsort.js') }}"></script>
    <script>
        layui.use(['layer','carousel', 'form','formSelects','laytpl'], function(){
            var layer = layui.layer,

                laytpl = layui.laytpl,
                form =layui.form;


            var ue = UE.getEditor('richtext');
            var _editor = UE.getEditor("edit_image",{
                initialFrameWidth:800,
                initialFrameHeight:300,
                zIndex:19891026,
            });
            _editor.ready(function (){
                _editor.hide();
                _editor.addListener('beforeInsertImage',function(t,arg){
                    console.log(arg);
                    console.log(t);
                    var obj = _editor.queryCommandValue("serverparam");
                    if(obj.type == "upload-image"){
                        if(arg.length>1){
                            layer.msg("最多只能选择1张图片，请重新选择");
                            return false;
                        }
                        if(arg.length>0) {
                            var uploadImageTd = obj.uploadImageItem.parent().find(".layui-upload-list");
                            console.log(uploadImageTd);
                            uploadImageTd.find('img').attr('src',arg[0].src);
                            uploadImageTd.find('input').val(arg[0].image_id);
                            uploadImageTd.show();
                        }else{
                            layer.msg("请先选择图片");
                            return false;
                        }
                    }
                    return true;
                });
            });

            $("body").on("click", ".upload-image", function () {

                //此处进行初始化
                var obj = _editor.queryCommandValue("serverparam");
                obj.type = "upload-image";
                obj.uploadImageItem = $(this);
                var uploadImage = _editor.getDialog("insertimage");
                console.log(obj);
                uploadImage.open();
            });
            //监听提交
            form.on('submit(post-submit)', function(data){

            });

            $('#phone-main').DDSort({
                target: '.drag',
                delay: 50,
                floatStyle: {
                    'border': '1px solid #ccc',
                    'background-color': '#fff'
                },
                // 由于 transform 的影响，对于类似 bootstrap 这样用了 transform 的元素，
                // 需要手动处理拖拽元素的位置，如下
                move: function (left, top) {
                    $(this).css('left', left);
                    $(this).css('top', top );
                },
                // 延时处理，默认为 50 ms，防止手抖点击 A 链接无效
                up: function() {
                   console.log($(this).parent())

                }

            });

            $("body").on("click", ".btn-del", function () {

                var $this = $(this);
                layer.confirm('确定要删除吗？',
                    function(index) {
                        $this.parents(".drag").remove();
                        layer.close(index);
                    });
            });


            $("body").on("click", "nav.special", function () {
                var _this= $(this);
                alert(_this.data("type"))
            });

            function tpl(data) {
                var getTpl = custom_tempalte.innerHTML
                    ,view = document.getElementById('view');
                laytpl(getTpl).render(data, function(html){
                    $('#phone-main').append(html)
                    console.log(html);
                    //view.innerHTML = html;
                });
            }



        });
    </script>
@endsection